@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
:root {
  --primary-color: #00334e;
  --secondary-color: #fff;
  --third-color: #189ab4;
  --fourth-color: #e8f0f1;
}

/* feature-head */
.features-head {
  background-color: var(--primary-color);
  color: #fff;
}
.features-head img {
  width: 20rem;
  justify-self: flex-end;
  margin-right: 10rem;
}
.features-head h1 {
  font-size: 5rem;
  margin-left: 3.5rem;
}
.features-head p {
  font-size: 1.8rem;
  margin-left: 3.5rem;
}

/* sub head  */
.sub-head {
  background-color: var(--fourth-color);
}
.sub-head img {
  width: 25rem;
  justify-self: flex-end;
  margin-right: 10rem;
}
.sub-head h1 {
  font-size: 4rem;
  margin-left: 3.5rem;
}
.sub-head p {
  font-size: 1.8rem;
  margin-left: 3.5rem;
}

/* main head  */
.feature-main .flex {
  justify-content: flex-start;
}
.flex img {
  width: 5.5rem;
  margin-right: 2rem;
}
.flex p {
  font-size: 1.6rem;
  font-weight: 600;
}
.feature-main .grid {
  padding: 3rem;
}
.feature-main .grid > *:first-child {
  grid-column: 1 / span 3;
}
.feature-main .grid > *:nth-child(2) {
  grid-column: 1 / span 2;
}
.feature-main .grid > *:nth-child(4) {
  grid-column: 1 / span 2;
}
.feature-main .grid > *:nth-child(6) {
  grid-column: 1 / span 3;
}
/* footer */
.footer {
  background-color: var(--third-color);
}

/* social icon */
.social-icon {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
}
.social-icon img {
  width: 5rem;
  height: auto;
  color: aliceblue;
}
.social-icon a {
  color: aliceblue;
}
@media (max-width: 80.5rem) {
  html {
    font-size: 45%;
  }

  .head .container {
    overflow: hidden;
  }
  .navbar {
    margin: -0.8rem;
  }
  .container .grid {
    display: flex;
    flex-direction: column;
  }

  .feature-main .container {
    overflow: hidden;
  }
}
@media (max-width: 51.5rem) {
  .features-head h1 {
    font-size: 3.5rem;
  }
  .features-head img {
    width: 17rem;
    margin-right: 0rem;
  }
  /* sub head  */
  .sub-head h1 {
    font-size: 3.5rem;
    margin-left: 0;
  }
  .sub-head p {
    font-size: 1.8rem;
    margin-left: 0;
  }
  .sub-head img {
    width: 22rem;
    justify-self: flex-end;
    margin-right: 0rem;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .sub-heading-para {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .social-icon {
    margin-left: 0rem;
  }
}